<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>浏览页面</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css"/>
    <style>
        .selected_class{
            box-shadow: 3px 3px 6px rgba(85, 154, 227, 0.4);
            border: 2px solid #2d8cf0;
        }
        .ellipsis {
            overflow: hidden; /* 确保超出容器的文本被隐藏 */
            white-space: nowrap; /* 确保文本在一行内显示 */
            text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
        }
    </style>
</head>
<body>
<form class="layui-form">

    <div class="mainBox">
        <div class="main-container mr-5">
            <div class="layui-form-item">
                <label class="layui-form-label required">AI生图指令模板</label>
                <div class="layui-input-block ai_image_command_html"  style="margin-right:10px;display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;">
                    <div class="font_click"  data-id="1" style="width: 100px;height: 120px;margin-right: 10px;">
                        <img src="https://ai-video-1320718644.cos.ap-guangzhou.myqcloud.com/video/local/stable_diffusion_image/20240513/png/0b52503b7725942befdf.png" style="width: 100px;height: 100px;">
                        <div>实打实大苏打</div>
                    </div>
                </div>
                <input type="hidden" name="ai_image_command_id" value="" lay-verify="required">
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">方案名称前缀</label>
                <div class="layui-input-block">
                    <input type="text" name="prefix" placeholder="请输入方案名称前缀" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
                提交
            </button>
            <!--<button type="reset" class="pear-btn pear-btn-md">-->
            <!--重置-->
            <!--</button>-->
        </div>
    </div>
</form>
<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
<script src="/app/admin/component/pear/pear.js"></script>
<script src="/app/admin/component/jsoneditor/jsoneditor.js"></script>
<script src="/app/admin/admin/js/permission.js"></script>
<script src="/app/admin/admin/js/functions.js"></script>
<script src="/app/admin/admin/js/md5.js"></script>
<script>
    const UPDATE_API = "/app/admin/novel/index/generateplan";

    layui.use(["form", "util", "popup","jquery", "xmSelect"], function () {
        // 字段 指令模板
        layui.$.ajax({
            url: "/app/admin/image/aiimagecommand/select?status=1&limit=100",
            dataType: "json",
            async:true,
            headers: get_header({"status":1}),
            success: function (res2) {
                let html = '';
                layui.$.each(res2.data,function (i,v) {
                    let selected = '';
                    html += ' <div class="command_click '+selected+'" data-id="'+v.id+'" style="width: 100px;height: 120px;margin-right: 10px;">\n' +
                        '           <img src="'+v.image+'" style="width: 100px;height: 100px;">\n' +
                        '           <div class="ellipsis">'+v.name+'</div>\n' +
                        '  </div>';
                })
                layui.$('.ai_image_command_html').html(html);
                if (res2.code) {
                    layui.popup.failure(res2.msg);
                }
            }
        });
        $('.ai_image_command_html').delegate('.command_click','click',function () {
            $('.command_click').removeClass('selected_class');
            $(this).addClass('selected_class');
            $('input[name="ai_image_command_id"]').val($(this).data('id'));
        })
    });

    // 字段 文件 url
    layui.use(["form", "popup","loading"], function () {
        layui.form.on("submit(save)", function (data) {
            data.field['ids'] = layui.url().search['ids'];
            let loading = layer.load();
            layui.$.ajax({
                url: UPDATE_API,
                type: "POST",
                dateType: "json",
                data: data.field,
                async:true,
                headers: get_header(data.field),
                success: function (res) {
                    layer.close(loading);
                    if (res.code) {
                        return layui.popup.failure(res.msg);
                    }
                    return layui.popup.success("加入生成方案队列成功", function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    });
                }
            });
            return false;
        });
    });

</script>
</body>
</html>